<template xmlns="http://www.w3.org/1999/html">
    <div class="app-container">
        <div class="top">
            <p>机器人配置管理</p>
            <!-- 机器人图标 -->
            <div class="par-conter4">
                <img v-if="this.ruleForm.robot_state == 1" src="../images/p2.png" alt="">
                <img v-else src="../images/p22.png" alt="">
            </div>
        </div>
        <div class="form-container">
            <div style="width:90%;display:flex;justify-content: center;
                     align-items: center;">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                    <el-row :gutter="20">
                        <el-col :span="12" :offset="0">
                            <el-form-item label="机器人" prop="robot_name">
                                <el-input v-model="ruleForm.robot_name" placeholder="请输入机器人名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" :offset="0">
                            <el-form-item label="机器人IP" prop="robot_ip">
                                <el-input v-model="ruleForm.robot_ip" placeholder="请输入机器人ip"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12" :offset="0">
                            <el-form-item label="机器人PORT" prop="robot_port">
                                <el-input v-model="ruleForm.robot_port" placeholder="请输入机器人port"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" :offset="0">
                            <el-form-item label="摄像头IP" prop="video_ip1">
                                <el-input v-model="ruleForm.video_ip1" placeholder="请输入摄像头ip"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12" :offset="0">
                            <el-form-item label="摄像头端口号" prop="video_port1">
                                <el-input v-model="ruleForm.video_port1" placeholder="请输入摄像头端口号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" :offset="0">
                            <el-form-item label="摄像头用户名" prop="video_name1">
                                <el-input v-model="ruleForm.video_name1" placeholder="请输入摄像头用户名"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12" :offset="0">
                            <el-form-item label="摄像头密码" prop="video_pwd1">
                                <el-input v-model="ruleForm.video_pwd1" placeholder="请输入摄像头密码"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" :offset="0">
                            <el-form-item label="MAC" prop="mac">
                                <el-input v-model="ruleForm.mac" placeholder="请输入MAC地址"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="20" :offset="0">
                            <el-form-item label="备注" class="textt">
                                <el-input class="text" type="textarea" placeholder="请输入内容(0-255)"
                                    v-model="ruleForm.remark"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="btn">
                <el-button type="primary" style="width:100px; height: 35px; background-color: #162557; margin: 20px 0 0 60px;font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #EDEDED;
                background: linear-gradient(0deg, #0D1538, #1B2D67);
                border: 2px solid #2B5B9B;
                border-radius: 4px;" @click="onSubmit">确认配置</el-button>
                <el-button type="primary" style="width:100px; height: 35px; background-color: #162557; margin: 20px 0px 0px 20px;font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #EDEDED;
                background: linear-gradient(0deg, #0D1538, #1B2D67);
                border: 2px solid #2B5B9B;
                border-radius: 4px;" @click="robotLink">连接</el-button>
                <el-button type="primary" style="width:100px; height: 35px; background-color: #162557; margin: 20px 0px 0px 20px;font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #EDEDED;
                background: linear-gradient(0deg, #0D1538, #1B2D67);
                border: 2px solid #2B5B9B;
                border-radius: 4px;" @click="robotBreaklink">断开</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import {addRobot, getInfo, jqrDK, jqrLJ} from '@/api/nssc/robotconfig/robotconfig'
export default {
    data() {
        return {
            timer: null,//定时器
            //表单参数
            ruleForm: {},
            // 表单校验
            rules: {
                robot_name: [
                    { required: true, message: "机器人名称不能为空", trigger: "blur" }
                ],
                robot_ip: [
                    { required: true, message: "机器人ip不能为空", trigger: "blur" }
                ],
                robot_port: [
                    { required: true, message: "机器人port不能为空", trigger: "blur" }
                ],
                video_ip1: [
                    { required: true, message: "摄像头IP不能为空", trigger: "blur" }
                ],
                video_port1: [
                    { required: true, message: "摄像头端口号不能为空", trigger: "blur" }
                ],
                video_name1: [
                    { required: true, message: "摄像头用户名不能为空", trigger: "blur" }
                ],
                video_pwd1: [
                    { required: true, message: "摄像头密码不能为空", trigger: "blur" }
                ]
            },
            queryparmas: {
                robot_ip: undefined,
                robot_port: undefined,
                robotid: undefined,
            }
        };
    },
    created() {
        this.getData() //获取表单数据上一次提交后台的表单数据
    },
    mounted() {
    },
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer); //清除定时器
        }
    },
    methods: {
        //获取服务器上一次提交后台的表单数据
        getData() {
            getInfo().then(response => {
                //更新表单数据
                this.ruleForm = response.data
                localStorage.setItem("robot_ip", this.ruleForm.robot_ip)//存储值
                localStorage.setItem("robot_port", this.ruleForm.robot_port)//存储值
                localStorage.setItem("id", this.ruleForm.id)//存储值
            })
        },//机器人配置
        onSubmit: function () {
            this.$refs["ruleForm"].validate(valid => {
                if (valid) {
                    addRobot(this.ruleForm).then(response => {
                        this.$modal.msgSuccess("配置成功");
                    })
                }
            });
        }, //机器人链接
        robotLink() {
            //把存储的值赋值给queryparmas
            this.queryparmas.robot_ip = localStorage.getItem("robot_ip")
            this.queryparmas.robot_port = localStorage.getItem("robot_port")
            this.queryparmas.robotid = localStorage.getItem("id")
            jqrLJ(this.queryparmas).then(response => {
                if (typeof (response) != null) {
                   this.$modal.msg(response.msg);
                   if(response.msg == '机器人连接成功'){
                      this.ruleForm.robot_state=1;
                   }else {
                      this.ruleForm.robot_state=0;
                   }
                }
            });
        }, //机器人断开链接
        robotBreaklink() {
            this.queryparmas.robotid = localStorage.getItem("id")
            jqrDK(this.queryparmas).then(response => {
              if (typeof (response) != null) {
                this.$modal.msg(response.msg);
                if(response.msg == '机器人断开成功'||response.msg == '机器人未连接'){
                  this.ruleForm.robot_state=0;
                }else {
                  this.ruleForm.robot_state=1;
                }
              }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
* {

    padding: 0;
    margin: 0;

}

.app-container {
    background: #011137 !important;
    height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    //justify-content: center;
    align-items: center;

    .top {
        width: 98%;
        height: 50px;
        text-align: left;
        line-height: 50px;
        background: #011137 !important;
        // border: 1px solid #2a2e4d;
        border-top: none;
        color: #fff;
        font-size: 20px;
        // margin: 0 0 100px 10px;
        //padding-left: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        >p {
            //background-color: aquamarine;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .par-conter4 {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-left: 10px;
            img {
                width: 31px;
                height:31px;
            }
        }
    }

    .form-container {
        width: 98%;
        height: calc(100vh - 200px);
        //margin-left: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #011137 !important;
        border-radius: 4px;
        text-align: center;
        flex-direction: column;
    }

    ::v-deep .el-form-item__label {
        margin: 20px 0px 0 0px;
        font-size: 13px;
        color: #b6b7be;

    }

    ::v-deep.el-form-item__label {
        width: 150px !important;
    }

    .el-form {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;

        .textt {
            margin-left: -20px;
        }

        .text {
            width: 960px;

        }

        ::v-deep .el-textarea__inner {
            background: #0F1A43;
            border: 2px solid #54619D;
            border-radius: 4px;
            margin: 30px 0 0 0;
            height: 100px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #C1C1C1;
        }

        ::placeholder {
            font-size: 13px;
            color: #b6b7be;
        }
    }

    .el-input {
        width: 380px;
        height: 20px;
        margin: 20px 20px 0 0px;
    }

    ::v-deep .el-input__inner {
        background: #0F1A43;
        border: 2px solid #54619D;
        border-radius: 4px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #C1C1C1;
    }
}
</style>
